<template>
  <div class="navigation-container">
    <router-view v-slot="{ Component }">
      <keep-alive :include="['Home']">
        <component :is="Component"></component>
      </keep-alive>
    </router-view>

    <div class="block"></div>
    <van-tabbar v-model="activeKey" route v-show="showTabbar">
      <van-tabbar-item name="home" icon="wap-home-o" to="/nav/home">首页</van-tabbar-item>
      <van-tabbar-item name="personal" icon="manager-o" to="/nav/personal">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, KeepAlive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const showTabbar = ref(true);

onMounted(() => {
  if (route.meta.tabbar === false) {
    showTabbar.value = false;
  }
});
let activeKey = ref('home');
</script>

<style lang="less" scoped>
.navigation-container {
  .block {
    width: 100%;
    height: 55px;
  }
}
</style>
